<template>
  <div class="nav-box-wrap">
    <div class="nav-box flex-center" :class="[pageType == 1 ? 'border' : '']" :style="{ background: background }">
      <div class="wrap nav-block flex">
        <div class="logo-wrap flex-center" @click="toHome()">
          <div class="logo_two">
            <img src="../assets/img/logo2.png" />
          </div>
          <div class="logo_one">
            <img src="../assets/img/logo1.png" />
          </div>
          <div class="logo_three">
            <img src="../assets/img/logo3.png" />
          </div>
        </div>
        <div class="search-box flex">
          <input class="ipt" type="text" placeholder="万千好物，等你来搜索" v-model="goodsName" ref="keyword" />
          <div class="search-btn flex-center fs-14 fw-bold" @click="toSearch">搜索</div>
        </div>
        <div class="car-box-wrap">
          <el-badge :value="cartTotalNum" class="item">
            <div class="car-box flex-center" @click="toCart">
              <img class="img" src="../assets/icon/icon_shopCarWhite.png" alt="" />
              <span class="fw-bold">我的购物车</span>
            </div>
          </el-badge>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import {
    siteInfo
  } from '@/api/base';
  import {
    getCartGoodsNum
  } from '@/api/cart'
  export default {
    name: "SearchSub",
    props: {
      pageType: {
        //是否展示border-bottom
        type: Number,
        default: 1, //0 --- 不展示  1 -- 展示
      },
      background: {
        type: String,
        default: "#fff",
      },
      keyword: {
        type: String,
        default: "",
      },
      isJump: {
        type: Boolean,
        default: true,
      },
      isCartPage: {
        type: Boolean,
        default: false,
      }
    },
    data() {
      return {
        goodsName: this.keyword,
        cartTotalNum: '',
      }
    },
    watch: {
      $route() {

      },
    },
    computed: {
      siteInfo() {
        return this.$store.state.siteInfo
      }
    },
    created() {
      this.getSiteInfo();
      if (!this.isCartPage) {
        this.getCartTotal();
      }
      window.addEventListener('keydown', this.onSubmit, false)
    },
    beforeDestroy() {
      window.removeEventListener('keydown', this.onSubmit, false);
    },
    destroyed() {
      window.removeEventListener("keydown", this.onSubmit, false)
    },
    methods: {
      //获取购物车数量
      getCartTotal() {
        getCartGoodsNum().then(res => {
          if (res.code == 0) {
            if (res.data > 99) {
              this.cartTotalNum = '99+'
            } else if (res.taotal == 0) {
              this.cartTotalNum = ''
            } else {
              this.cartTotalNum = res.data;
            }
          }
        })
      },
      getSiteInfo() {
        const that = this;
        siteInfo().then(res => {
          if (res.code == 0) {
            // that.siteObj = res.data;
            this.$store.commit("SET_SITE_INFO", res.data);
          }
        })
      },
      toHome() {
        if (this.$route.path == '/') {
          return;
        }
        this.$router.replace("/");
      },
      onSubmit(e) {
        if (e.keyCode == 13) {
          this.toSearch()
        }
      },
      toSearch() {
        if (this.isJump) {
          if (!this.goodsName) {
            return;
          }
          this.$router.push({
            path: '/search',
            query: {
              name: this.goodsName
            }
          })
        } else {
          var goodsName = this.$trim(this.goodsName);
          this.$emit('toSearch', goodsName)
        }
      },
      toCart() {
        this.$router.push("/cart");
      },
    },
  };
</script>

<style lang="scss" scoped>
  ::v-deep .el-badge__content.is-fixed {
    left: 15px;
    top: 12px;
    right: inherit;
  }

  ::v-deep .el-badge__content {
    border-radius: 10px;
    color: #fff;
    display: inline-block;
    font-size: 10px;
    height: 14px;
    line-height: 14px;
    padding: 0 4px;
    text-align: center;
    white-space: nowrap;
    border: 1px solid #fff;
  }

  .nav-box-wrap {
    width: 100%;
    height: 122px;
  }

  .border {
    border-bottom: 1px solid var(--main-color);
  }

  // .wrap{
  //     width: 1180px;
  //     margin:auto;
  // }

  .nav-box {
    width: 100%;
    height: 122px;
    // position: fixed;
    // left: 0;
    // top: 34px;
    z-index: 22;
    box-sizing: border-box;

    .nav-block {
      justify-content: space-between;
      align-items: center;

      .logo_one {
        // width: 74px;
        height: 52px;

        img {
          width: 100%;
          height: 100%;
          object-fit: contain;
        }
      }

      .logo_two,
      .logo_three {
        // width: 112px;
        height: 52px;

        img {
          width: 100%;
          height: 100%;
          object-fit: contain;
        }
      }

      .logo_one {
        margin: 0 20px;
        // margin-right: 13px;
        // margin-left:6px;
      }

      .logo_three {
        margin-right: 20px;
      }

      .logo-box {
        width: 106px;
        height: 106px;

        .logo-img {
          width: 100%;
          height: 100%;
        }

        margin-right: 50px;
      }

      .search-box {
        width: 700px;
        box-sizing: border-box;
        background: #ffffff;
        align-items: center;
        border-radius: 21px 21px 21px 21px;
        padding: 2px 2px 2px 10px;
        overflow: hidden;
        border: 1px solid var(--main-color);
        box-sizing: border-box;

        .ipt {
          flex: 1;
          border: none;
          outline: none;
          // color:#c0c4cc;
          font-size: 14px;
        }

        .search-btn {
          width: 72px;
          height: 36px;
          background: var(--main-color);
          border-radius: 18px 18px 18px 18px;
          color: white;
          flex-shrink: 0;
        }
      }

      .void-box {
        width: 155px;
        height: 42px;
        box-sizing: border-box;
      }

      .car-box-wrap {
        flex: 1;
        display: flex;
        justify-content: flex-end;
      }

      .car-box {
        width: 125px;
        height: 42px;
        box-sizing: border-box;
        background: var(--main-color);
        border-radius: 21px 21px 21px 21px;
        gap: 0 15px;
        border: 1px solid var(--main-color);
        color: white;

        .img {
          width: 21px;
          height: 18px;
        }
      }

      @media screen and (max-width: 1280px) {
        .search-box {
          width: 520px;
          border-radius: 24px;
        }

        .logo_one {
          // width: 74px;
          height: 42px;

          img {
            width: 100%;
            height: 100%;
            object-fit: contain;
          }
        }

        .logo_two,
        .logo_three {
          // width: 112px;
          height: 42px;

          img {
            width: 100%;
            height: 100%;
            object-fit: contain;
          }
        }

        // .car-box {
        //     width: 125px;
        //     height: 42px;
        // }
      }
    }
  }
</style>
